import DetailContainer, { Title } from "@/components/DetailContainer";
import TestTopic from "@/components/TestTopic";
import { add_topic, edit_topic, get_topic_detail } from "@/services/topic";
import { topic_type } from "@/utils/enum";
import type { ProFormInstance } from "@ant-design/pro-components";
import { ProForm, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-components";
import { history, useParams } from "@umijs/max";
import { Form, message } from "antd";
import { useRef } from "react";
const topicMap = {
  add: add_topic,
  update: edit_topic
};
const UseTopicAddEdit = () => {
  const [form] = Form.useForm();
  const { id } = useParams();
  const isNew = id === "new";
  const formRef = useRef<ProFormInstance<any>>();

  return (
    <DetailContainer>
      <ProForm
        form={form}
        formRef={formRef}
        layout="vertical"
        grid={true}
        rowProps={{
          gutter: [24, 0]
        }}
        request={async () => {
          if (isNew) return {};
          let resp = await get_topic_detail(id as string);
          if (resp.code === 0) {
            return {
              ...resp.data
            };
          } else {
            return {};
          }
        }}
        onFinish={async () => {
          const values = form.getFieldsValue(true);
          if (!isNew) {
            values.id = Number(id);
          }
          const resp = await topicMap[isNew ? "add" : "update"](values);
          if (resp?.code === 0) {
            history.push("/topic/list");
            message.success(`${isNew ? "新增" : "编辑"}成功`);
          }
        }}
      >
        {/* Topic Type */}
        <div style={{ width: "100%" }}>
          <Title>Topic Type</Title>
        </div>
        <ProFormSelect
          label="Topic type"
          rules={[{ required: true, message: "此项必填" }]}
          name="type"
          colProps={{
            span: 10
          }}
          options={topic_type}
        />

        {/* 基本信息 */}
        <div style={{ width: "100%" }}>
          <Title>Topic info</Title>
        </div>

        <ProFormText
          label="Topic name"
          rules={[{ required: true, message: "此项必填" }]}
          name="name"
          colProps={{
            span: 10
          }}
        />

        <ProFormText
          label="Topic Text"
          rules={[{ required: true, message: "此项必填" }]}
          name="topic_text"
          colProps={{
            span: 10
          }}
        />

        <ProFormText
          label="Topic Message"
          rules={[{ required: true, message: "此项必填" }]}
          name="message"
          colProps={{
            span: 10
          }}
        />

        <ProFormTextArea label="remark" placeholder="" name="remark" />

        {/* Test topic */}
        <div style={{ width: "100%" }}>
          <Title>Test topic</Title>
        </div>

        <div style={{ padding: "20px", width: "100%" }}>
          <TestTopic></TestTopic>
        </div>
      </ProForm>
    </DetailContainer>
  );
};

export default UseTopicAddEdit;
